<%@ page language="java" pageEncoding="UTF-8" %>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

		<!DOCTYPE html
			PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml">

		<head>
			<base href="${pageContext.request.contextPath}/">
			<meta charset="utf-8" />
			<title>${goods.bookName}_${site}</title>
			<link rel="stylesheet" type="text/css" href="css/index.css" />
			<script src="/js/jquery-3.6.0.js"></script>
			<script src="/layer/layer.js"></script>

			<script>
				$(function () {
					$("#joinCarButton").click(function () {
						let num = $("#buyNums").val();
						let userid = '${ sessionScope.USER.id }';
						let goodsid = '${ goods.id }';
						let totalmany = (num * $("#real_price").text()).toFixed(2);
						// ajax异步请求刷新
						var xmlhttp = new XMLHttpRequest();
						xmlhttp.onreadystatechange = function (result) {
							if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
								console.log(xmlhttp.responseText)
								var msg = JSON.parse(xmlhttp.responseText)
								if (msg.msg == '302') {
									console.log(msg.msg)
									location.href = "user?opr=login";
								} else if (msg.msg == 'ok') {
									$("#product_myCart").prop("style").display = "block"
									$(".orange").text(num)
									$("#total").text(totalmany)
									$("#mycart_count").text(msg.num)
								} else {
									layer.msg('系统繁忙，请稍后再试', { icon: 2 });
								}
							}
						}
						// true开启异步刷新
						xmlhttp.open("Post", "cart?opr=add&uid=" + userid + "&gid=" + goodsid + "&gNums=" + num, true);
						xmlhttp.setRequestHeader("ajax", "true")
						xmlhttp.send();
					})
				})
				function closeCartDiv() {
					$("#product_myCart").prop("style").display = 'none';
				}
			</script>

		</head>

		<body class="index">
			<div id="content"></div>
			<div class="container">
				<jsp:include page="header.jsp"></jsp:include>
				<jsp:include page="navbar.jsp"></jsp:include>
				<jsp:include page="search.jsp"></jsp:include>
				<div class="wrapper clearfix">
					<div>
						<img src="${goods.img}" alt=""
							style="width: 300px;height: 300px;float: left; display: block; border-radius: 5%;" />
					</div>
					<div class="summary">
						<h2>${goods.bookName}</h2>
						<!--基本信息区域-->
						<ul>
							<li><span class="f_r light_gray">商品编号：${goods.bookNum}<label
										id="data_goodsNo"></label></span></li>
							<li id="priceLi">销售价：<b class="price red2"><span class="f30"
										id="real_price">${goods.sellingPrice}</span>￥</b></li>
							<li>市场价：<s id="data_marketPrice">${goods.marketPrice}￥</s>
							</li>
							<li>库存：现货<span>(<label id="data_storeNums">${goods.stock}</label>)
								</span></li>
							<li>顾客评分：<span class="grade"><i style="width:0px;"></i></span>(已有0人评价)
							</li>
						</ul>
						<div class="current">
							<dl class="m_10 clearfix">
								<dt>购买数量：</dt>
								<dd>
									<input class="gray_t f_l" type="text" id="buyNums" value="1" maxlength="5"
										onblur="nums()" />
									<div class="resize">
										<a class="add" id="add"></a> <a class="reduce" id="reduce"></a>
									</div>
								</dd>
							</dl>



							<input class="submit_buy" type="button" id="buyNowButton" value="立即购买"
								onclick="order_add()" />
							<div class="shop_cart" style="z-index:1">
								<input class="submit_join" type="button" id="joinCarButton" value="加入购物车" />

								<div class="shopping" id="product_myCart" style='display:none'>
									<dl class="cart_stats">
										<dt class="gray f14 bold">
											<a class="close_2 f_r" href="javascript:closeCartDiv();" title="关闭">关闭</a>
											<img src="images/front/right_s.gif" width="24" height="24" alt="" />成功加入购物车
										</dt>
										<dd class="gray">
											目前选购商品共<b class="orange" name='mycart_count'></b>件<span>合计：<b
													name='mycart_sum' id="total"></b></span>
										</dd>
										<dd>
											<a class="btn_blue bold" href="/cart?opr=list">进入购物车</a><a
												class="btn_blue bold" href="javascript:void(0)"
												onclick="closeCartDiv();">继续购物>></a>
										</dd>
									</dl>
								</div>
							</div>



						</div>

					</div>
				</div>

				<div class="wrapper clearfix container_2">
					<!--左边栏-->
					<div class="sidebar f_l">
						<div class="box m_10">
							<div class="title">热卖商品</div>
							<div class="content">
								<ul class="ranklist">
									<c:forEach items="${hotGoods}" var="hotGoods">
										<li class="current"><a href="goods?opr=view&id=${hotGoods.id}"><img width="58px"
													height="58px" src="${hotGoods.img}"
													style=" display: block; border-radius: 5%;" /></a> <a title=""
												class="p_name"
												href="goods?opr=view&id=${hotGoods.id}">${hotGoods.bookName}</a>
											<b>￥${hotGoods.sellingPrice}</b>
										</li>
									</c:forEach>
								</ul>
							</div>
						</div>
					</div>

					<!--滑动面tab标签-->
					<div class="main f_r" style="overflow:hidden">
						<div class="uc_title" name="showButton">
							<label class="current"><span>商品详情</span></label> <label><span>顾客评价(0)</span></label>
							<label><span>购买记录(1)</span></label>
						</div>
						<div name="showBox">
							<!-- 商品详情 start -->
							<div>
								${goods.describes}
							</div>
							<!-- 商品详情 end -->

							<!-- 顾客评论 start -->
							<div class="hidden comment_list box">
								<div class="title3">
									<span class="f_r f12 light_gray normal"> 只有购买过该商品的用户才能进行评价
									</span> <img src="images/front/comm.gif" width="16px" height="16px" />商品评论<span
										class="f12 normal">（已有<b class="red2">0</b>条）
									</span>
								</div>

								<div id='commentBox'></div>
							</div>
							<!-- 顾客评论 end -->

							<!-- 购买记录 start -->
							<div class="hidden box">
								<div class="title3">
									<img src="images/front/cart.gif" width="16" height="16" alt="" />
									购买记录<span class="f12 normal">（已有<b class="red2">1</b>购买）
									</span>
								</div>

								<table width="100%" class="list_table m_10 mt_10">
									<col width="150" />
									<col width="120" />
									<col width="120" />
									<col width="150" />
									<col />
									<thead class="thead">
										<tr>
											<th>购买人</th>
											<th>出价</th>
											<th>数量</th>
											<th>购买时间</th>
											<th>状态</th>
										</tr>
									</thead>
								</table>
								<table width="100%" class="list_table m_10">
									<col width="150" />
									<col width="120" />
									<col width="120" />
									<col width="150" />
									<col />
									<tbody class="dashed" id="historyBox"></tbody>
								</table>
							</div>
							<!-- 购买记录 end -->
						</div>
					</div>
				</div>
				<jsp:include page="help.jsp"></jsp:include>
				<jsp:include page="footer.jsp"></jsp:include>
			</div>
			<script>
				window.addEventListener("load", function () {
					document.getElementById("add").addEventListener("click", function () {
						let num = document.getElementById("buyNums").value;
						if (num < ${ goods.stock }){
						document.getElementById("buyNums").value = parseInt(num) + 1;
					}


				})
				document.getElementById("reduce").addEventListener("click", function () {
					let num = document.getElementById("buyNums").value;
					if (num > 1) {
						document.getElementById("buyNums").value = parseInt(num) - 1;
					}

				})
				
				
				})

				// function adds() {
				// 	let num = document.getElementById("buyNums").value;
				// 	if (num < ${ goods.stock }) {
				// 		document.getElementById("buyNums").value = parseInt(num) + 1;
				// 	}
				// }
				// function reduces(){
				// 	let num = document.getElementById("buyNums").value;
				// 	if (num > 1) {
				// 		document.getElementById("buyNums").value = parseInt(num) - 1;
				// 	}
				// }

				function nums() {
					if (document.getElementById("buyNums").value > ${ goods.stock }) {
						document.getElementById("buyNums").value = ${ goods.stock };
					}
					if (isNaN(document.getElementById("buyNums").value)) {
						document.getElementById("buyNums").value = 1;
					}
					if (document.getElementById("buyNums").value <= 0) {
						document.getElementById("buyNums").value = 1;
					}
				}
				function order_add() {
					let num = document.getElementById("buyNums").value;
					let userid = '${ sessionScope.USER.id }';
					let goodsid = '${ goods.id }';
					// console.log("order?opr=add&num=" + num + "&userid=" + userid + "&goodsid=" + goodsid)
					location.href = "order?opr=add&num=" + num + "&userid=" + userid + "&goodsid=" + goodsid;
				}

			</script>

		</body>

		</html>